# Component: Media Stream Detail

Advanced stream viewer with integrated widget support

Media Block

### BEM Anatomy

| Type      | Class Name                | Description                                                                                             |
| --------- | ------------------------- | ------------------------------------------------------------------------------------------------------- |
| ==Block== | `.as-media-stream-detail` | The core container. Manages spacing for the internal card and external keyword tags.                    |
| Element   | `__card`                  | The primary visual wrapper (often using card-style shadow/background) for the video and top-level info. |
| Element   | `__video`                 | A `ratio-16x9` container housing the iframe or thumbnail fallback.                                      |
| Element   | `__image`                 | The poster or fallback image displayed before the video is initialized or if playback fails.            |
| Element   | `__content`               | Wrapper for the text-heavy portion of the detail view, including title and full description.            |
| Element   | `__description`           | The primary text area for the stream summary. Handles line-height and paragraph spacing.                |
| Element   | `__footer`                | The bottom section of the detail view containing metadata and interaction buttons.                      |
| Element   | `__meta-data`             | A flex container in the footer that distributes date, category, and provider info.                      |
| Element   | `__meta`                  | The base unit for a metadata entry, providing consistent typography and icon alignment.                 |
| Modifier  | `__meta--date`            | Styles the metadata specifically for publication dates (e.g., italics or calendar icon).                |
| Modifier  | `__meta--category`        | Styles the metadata for taxonomy tags; may include background-color chips.                              |
| Modifier  | `__meta--provider`        | Contextual modifier to strip default link styling from provider buttons.                                |
| Element   | `__button`                | Actionable elements within the detail view (e.g., Download, Share, or Play).                            |
| Element   | `__keywords`              | The container for SEO-friendly keyword tags located at the bottom of the block.                         |

### Split-Screen Implementation

This component utilizes a conditional layout logic. If a `WidgetUrl` is provided alongside the stream, the viewport switches from a simple 16:9 container to a Bootstrap 8/4 column split (`.col-lg-8` and `.col-lg-4`).

##### Generated HTML (Widget Mode)

```html
<div class="as-media-stream-detail">
    <div class="as-media-stream-detail__card card">
        <div class="row g-0">
            <!-- Main Video -->
            <div class="col-lg-8">
                <div class="ratio ratio-16x9">
                    <iframe src="..."></iframe>
                </div>
            </div>
            <!-- Side Widget -->
            <div class="col-lg-4">
                <iframe src="..." class="w-100 h-100"></iframe>
            </div>
        </div>
    </div>
</div>
```

##### SCSS

```scss
.as-media-stream-detail {
  &__image {
    // Thumbnails cover the ratio area
    object-fit: cover;
  }
  
  &__description {
    // Respects CMS-entered line breaks
    white-space: pre-line;
  }

  &__meta-data {
    display: flex;
    justify-content: space-between;
  }
}
```
